
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <div id='app'>

            <h1>{{title}}</h1>

            <table>
                <tr>
                    <td>
                        id
                    </td>

                    <td>
                        商品名称
                    </td>

                    <td>
                        商品价格
                    </td>
                    <td>
                        操作
                    </td>
                </tr>

                <tr v-for="s in todo">


                    <td>
                        {{s.id}}

                    </td>

                    <td>
                        {{s.name}}
                    </td>

                    <td>
                        {{s.price}}
                    </td>
                    <td>
                        <span v-show="goCar">
                            <button @click="add(s.id)">加入购物车</button>
                            <button @click="del(s.id)">不感兴趣</button>
                        </span>
                        <span v-if="goIndex">

                            件数：
                            <button @click="Quantity('del',s.id)"> &nbsp;- &nbsp; </button>

                            {{s.quantity}}

                            <button @click="Quantity('add',s.id)">&nbsp;+&nbsp;</button>


                            <input v-show="moreDel" v-model="isDel" :value="s.id" type="checkbox" :id="s.id">

                        </span>

                    </td>

                </tr>

            </table>
            <br><br>
            <button v-show="DisCount"><span title="来薅羊毛吧" @click="discount">随机折扣</span> </button>
            <button v-show="!DisCount"><span title="去GoShopping吧">我的折扣:{{Discount}}折</span> </button>
            <button v-show='goCar'><span title="前往我的购物车" @click="Gocar">购物车>>></span> </button>
            <button v-show='goIndex'><span title="返回首页" @click="Goindex">首页>>></span> </button>
            <button v-show='goIndex && EorD' @click="Moredel">批量删除</button>
            <button v-show='goIndex &&  !EorD' @click="Moreedit">编辑</button>

            <span v-show='goIndex' title="花费">总件数:{{quantity}}&nbsp;&nbsp; 总金额:{{money}}&nbsp;&nbsp;折扣后金额:{{endMoney}}
                <button @click="End">去结账>>> </button>
                
            </span>


        </div>
        <script src="../Vue.js/vue.js"></script>

        <script>


            let arr = [

                {
                    id: '1',
                    name: '贱卖菠菜',
                    price: 0.01,

                    quantity: 0

                },
                {
                    id: '2',
                    name: '秘制小汉堡',
                    price: 8.00,
                    quantity: 0
                },
                {
                    id: '3',
                    name: '一块钱四个窝窝头',
                    price: 1.00,
                    quantity: 0
                },
                {
                    id: '4',
                    name: '谁他妈买小米',
                    price: 1999.00,
                    quantity: 0
                },
                {
                    id: '5',
                    name: '妈妈给我买大块烤山药',
                    price: 6.00,
                    quantity: 0
                },
                {
                    id: '6',
                    name: '考清华考北大不如烤地瓜',
                    price: 88.00,
                    quantity: 0
                },

            ]

            let shoppCar = []

            var app = new Vue({

                el: "#app",

                data: {

                   

                    title: "SHIXIN_SHOPP_INDEX",

                    todo: arr,

                    goCar: true,

                    goIndex: false,

                    money: 0,

                    endMoney: 0,

                    quantity: 0,

                    DisCount: true,

                    Discount: 0,

                    moreDel: false,

                    EorD:false,

                    isDel:[]

                },
                watch: {

                    quantity: function () {

                        this.money = 0

                        shoppCar.forEach(item => {


                            this.money += parseInt(item.quantity * item.price)

                            if (this.DisCount) {

                                this.endMoney = this.money

                            } else {

                                this.endMoney = parseInt(this.money * (this.Discount / 10))


                            }


                        })

                    }


                },
                methods: {

                    End(){


                        alert("网络被外星人偷走了，请重新加载页面！")

                        this.Goindex()

                    },

                    Moredel(){

                        

                      if (confirm("确定要进行该操作吗") ) {
                      

                        this.isDel.map(item=>{



                            shoppCar=shoppCar.filter(item1=>{

                                return item !=item1.id

                            })



                        })

                        this.isDel=[]

                            this.Quantity()

                        this.todo=shoppCar

                        this.moreDel = false

                        this.EorD=false

                      } 



                    },

                    Moreedit() {

                        this.moreDel = true

                        this.EorD=true


                    },

                    discount() {

                        let discount = parseInt(Math.random() * 11)

                        if (discount >= 7) {

                            alert(`恭喜你获得了` + discount + `折折扣,并获得非酋成就`)

                        } else if (discount == 0) {

                            alert(`恭喜你,你遇见了江新传大老板并认他作干爹，所以此次消费由干爹买单`)

                        } else if (discount == 10) {

                            alert(`真抱歉，您未获得任何折扣，建议您买块好的地埋了吧！改改下辈子的命`)

                        } else {

                            alert(`恭喜你获得了` + discount + `折折扣,并达成欧皇成就`)

                        }


                        this.quantity++

                        setTimeout(() => {

                            this.quantity--

                        }, 10)

                        this.Discount = discount

                        this.DisCount = false

                    },

                    Quantity(type, id) {

                        this.quantity = 0

                        shoppCar.forEach(item => {


                            if (item.id == id) {

                                if (type == 'add') {

                                    ++item.quantity

                                } else {

                                    if (item.quantity == 1) {

                                        alert("最少为一件哦")

                                    } else {

                                        --item.quantity

                                    }
                                }

                            }

                            this.quantity += item.quantity

                        })

                    },

                    del(id) {


                        arr = arr.filter(item => {

                            return item.id != id

                        })


                        this.todo = arr


                    },

                    Gocar() {


                        this.quantity = 0
                        this.money = 0

                        shoppCar.forEach(item => {

                            this.money += item.price

                            this.quantity += item.quantity

                        })

                        this.todo = shoppCar
                        this.title = "SHIXIN_SHOPP_CAR"
                        this.goCar = false
                        this.goIndex = true

                        setTimeout(() => {


                            if (shoppCar.length == 0) {


                                if (confirm("购物车是空的哦！是否前往首页血拼呢！")) {


                                    this.Goindex()



                                }


                            }


                        }, 500)

                    },
                    Goindex() {

                        this.title = "SHIXIN_SHOPP_INDEX"
                        this.todo = arr
                        this.goCar = true
                        this.goIndex = false
                        this.EorD=false
                        this.moreDel=false

                    },

                    add(id) {

                        let Isyes = shoppCar.filter(item => {

                            return item.id == id

                        })

                        if (Isyes.length > 0) {

                            alert("您的购物车里面已经存在该商品了哦！")

                        } else {

                            let data = arr.filter(item => {

                                return item.id == id

                            })

                            data[0].quantity = 1

                            shoppCar.push(data[0])

                            alert('添加成功')

                        }


                    }

                }

            })

            setTimeout(() => {


                if (confirm('天上掉陷jin...啊不馅饼啦！随机折扣等你来拿！！！')) {

                    app.discount()


                }

            }, 250)




        </script>

    </body>

    </html>

</body>

</html>